import React, { useState, useEffect, useRef } from 'react';
import { useParams, withRouter } from 'react-router-dom';
import { getHouseDetail, addFavorite, removeFavorite, getFavorites } from '../../utils/http';
import { Tag, Spin, Alert, Carousel, message } from 'antd';
import { Breadcrumb } from 'antd';
import { StarFilled } from '@ant-design/icons';
import './dataliscss.css';
import './custom.css';
function HouseDetail(props: any) {
  const { id } = useParams<{ id: string }>();
  const [houseDetail, setHouseDetail] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [isCollected, setIsCollected] = useState<boolean>(false); // 默认未收藏
  const carouselRef = useRef<HTMLDivElement>(null); // 正确绑定轮播Ref

  useEffect(() => {
    const fetchData = async () => {
      if (!id) {
        setError('无效的房屋ID');
        setLoading(false);
        return;
      }

      setLoading(true);
      setError(null);
      
      // 并行请求以提高效率
      const [detailPromise, favoritesPromise] = [
        getHouseDetail(id),
        getFavorites()
      ];
      
      try {
        // 等待房屋详情请求完成
        const detailRes = await detailPromise;
        if (detailRes && detailRes.body) {
          setHouseDetail(detailRes.body);
        } else {
          throw new Error('数据格式异常');
        }
      } catch (detailErr) {
        console.error('获取房屋详情失败:', detailErr);
        setError('获取房屋详情失败，请稍后重试');
      } finally {
        setLoading(false);
      }
      
      // 单独处理收藏状态，即使失败也不影响页面显示
      try {
        const favoritesRes = await favoritesPromise;
        // 根据接口返回的数据结构判断是否已收藏
        if (favoritesRes && favoritesRes.body && Array.isArray(favoritesRes.body)) {
          // 检查当前房屋ID是否在收藏列表中
          const isFavorited = favoritesRes.body.some((item: any) => 
            item.id === id || item.houseId === id || item.houseCode === id
          );
          setIsCollected(isFavorited);
        }
      } catch (favErr) {
        console.error('获取收藏状态失败:', favErr);
        // 收藏状态获取失败不影响页面显示，保持默认值
      }
    };

    fetchData();
  }, [id]);

  // 处理图片轮播数据（确保至少2张图，保证轮播生效）
  const prepareImages = () => {
    // 优先使用真实数据，若无则用3张测试图（确保轮播）
    if (!houseDetail?.houseImg) {
      return [
        'https://images.unsplash.com/photo-1555854871-d6f2f10b53a3?w=1200',
        'https://images.unsplash.com/photo-1560185124-59d6c2c2eb83?w=1200',
        'https://images.unsplash.com/photo-1560185007-cde436f6a4d0?w=1200'
      ];
    }
    
    let images = typeof houseDetail.houseImg === 'string' ? [houseDetail.houseImg] : houseDetail.houseImg;
    // 确保图片数组长度≥2，否则补充测试图（保证轮播）
    if (images.length < 2) {
      images = [...images, 'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=1200'];
    }
    
    // 处理图片路径（兼容本地/远程图片）
    return images.map(img => {
      if (!img) return 'https://via.placeholder.com/1200x600?text=默认图片';
      return img.startsWith('http') ? img : `http://localhost:8080${img.startsWith('/') ? img : '/' + img}`;
    });
  };

  if (loading) {
    return (
      <div className="loading-container">
        <Spin size="large" tip="加载中..." />
      </div>
    );
  }

  if (error || !houseDetail) {
    return (
      <div className="error-container">
        <Alert
          message={error || '未找到房屋信息'}
          type="error"
          showIcon
          action={
            <button onClick={() => props.history.goBack()} className="ant-btn ant-btn-primary">
              返回上一页
            </button>
          }
        />
      </div>
    );
  }

  const images = prepareImages();
// 房屋配套数据
const supportingFacilities = ['电视', '冰箱', '洗衣机', '热水器', '沙发', '宽带', '衣柜', '天然气'];

// 房源概况文本
const houseDescription = `
【房源亮点】位于花果园M区，兰花广场BRT站就在楼下，交通便捷、
出行方便，精装三房两厅一厨一卫，拎包入住。【出租原因】房东因为长期住遵义，
所以打算把房子租出去，希望找能爱护房子的租户。【小区介绍】房子地处花果园M区，
小区楼下就是兰花广场，BRT公交站兰花广场站，眼前就是贵阳双子塔，双子塔前就是湿地公园、
饭后可以出门到湿地公园散散步、公园前就是花果园购物广场。
`;

// 处理收藏功能
  const handleCollect = async () => {
    try {
      if (isCollected) {
        // 取消收藏
        const removeResponse = await removeFavorite(id);
        console.log('取消收藏响应:', removeResponse);
        
        // 立即更新状态，提供即时反馈
        setIsCollected(false);
        message.success('已取消收藏');
      } else {
        // 执行添加收藏
        const addResponse = await addFavorite(id);
        console.log('添加收藏响应:', addResponse);
        
        // 更新状态
        setIsCollected(true);
        message.success('收藏成功');
      }
    } catch (error) {
      console.error('收藏操作失败:', error);
      
      // 提供更具体的错误信息
      let errorMessage = isCollected ? '取消收藏失败' : '收藏失败';
      if (error instanceof Error) {
        errorMessage = `${errorMessage}: ${error.message}`;
      }
      message.error(errorMessage);
    }
  };
  return (
    <div className="house-detail-page">
      {/* 返回按钮 + 面包屑导航（完全还原布局） */}
      <div className="header-section">
        <button onClick={() => props.history.goBack()} className="back-button">
          ← 返回
        </button>
        <Breadcrumb
          separator=">"
          items={[
            { title: '首页', href: '/' },
            { title: '房源列表', href: '/housing' },
            { title: '房屋详情' },
          ]}
          className="breadcrumb"
        />
      </div>

      {/* 顶部核心信息栏（1:1还原设计稿样式） */}
      <div className="top-info-bar">
        <div className="info-item">小区：{houseDetail.community || '花果园M区'}</div>
        <div className="info-item">房型：{houseDetail.roomType || '三室一厅'}</div>
        <div className="info-item rent-price">租金：<span>{houseDetail.price || 2800}</span>元/月</div>
        <div className="info-item">面积：{houseDetail.area || 74}㎡</div>
        <div className="tags-wrap">
          {houseDetail.tags?.includes('精装') && <Tag color="#1890ff">精装</Tag>}
          {houseDetail.tags?.includes('随时看房') && <Tag color="#1890ff">随时看房</Tag>}
          {houseDetail.tags?.includes('近地铁') && <Tag color="#1890ff">近地铁</Tag>}
        </div>
      </div>

      {/* 主体内容（左侧功能栏 + 右侧轮播图，完全还原分栏比例） */}
      <div className="main-content">
        {/* 左侧功能栏（宽度、间距、样式1:1还原） */}
        <div className="left-sidebar">
          <div className="sidebar-item">
            <span>房屋配套</span>
            <span className="arrow">&gt;</span>
          </div>
          <div className="sidebar-item">
            <span>房源概况</span>
            <span className="arrow">&gt;</span>
          </div>
          <div 
            className={`sidebar-item collect-btn ${isCollected ? 'collected' : ''}`}
            onClick={handleCollect}
          >
            <StarFilled className="star-icon" />
            <span>{isCollected ? '已收藏' : '收藏'}</span>
          </div>
        </div>

        {/* 右侧轮播图（核心轮播功能，确保100%可正常切换） */}
        <div className="carousel-wrapper">
          <Carousel
            ref={carouselRef}
            autoplay={true} // 强制自动轮播（无论图片数量）
            infinite={true} // 循环轮播
            dots={true} // 显示底部指示器
            dotPosition="bottom" // 指示器在底部
            effect="scrollx" // 滑动效果
            autoplaySpeed={3000} // 3秒切换一次
            speed={500} // 切换动画时长
            className="custom-carousel"
          >
            {images.map((img, idx) => (
              <div key={idx} className="carousel-slide">
                <img
                  src={img}
                  alt={`房屋图片${idx + 1}`}
                  className="carousel-image"
                  // 图片加载失败兜底
                  onError={(e) => {
                    e.currentTarget.src = 'https://via.placeholder.com/1200x600?text=图片加载失败';
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
      </div>
    </div>
  );
}

export default withRouter(HouseDetail);